<template>
	<uni-popup ref="privacy" type="bottom" :is-mask-click ="false" @close="disPopUp" >
		<view class="privacy-box">
			<view class="privacy-title">
				{{title}}
			</view>
			<view class="privacy-body">
				<view class="privacy-tip">{{desc1}}</view>
				<view class="privacy-tip active" @click="openPrivacyContract">{{urlTitle}}</view>
				<view class="privacy-tip">{{desc2}}</view>
			</view>
			<view class="privacy-foot flex">
				<view class="privacy-btn grey" @click="handleDisagree">不同意并退出</view>
				<view class="privacy-btn active">同意并继续
					<button id="agree-btn"
					  type="default"
					  open-type="agreePrivacyAuthorization"
					  class="weui-btn"
					  @click="handleAgree"
					></button>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		data() {
			return {
				title: "用户隐私保护提示",
				desc1: "感谢您使用本应用，您使用本应用前应当阅井同意",
				urlTitle: "《用户隐私保护指引》",
				desc2: "当您点击同意并开始时用产品服务时，即表示你已理解并同息该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法完整使用该应用。",
				innerShow: false,
				height: 0,
			}
		},
		mounted() {
			this.popUp();
			// if (wx.getPrivacySetting) {
			// 	wx.getPrivacySetting({
			// 		success: res => {
			// 			if (res.needAuthorization) {
			// 			   this.popUp()
			// 			}
			// 		},
			// 	})
			// }
		},
		methods: {
		        handleDisagree(e) {
					this.$emit('disagree');
		            this.disPopUp()
		        },
		        handleAgree(e) {
					this.$emit('agree');
		            this.disPopUp()
		        },
		        popUp() {
		            this.$refs.privacy.open();
		        },
		        disPopUp() {
		            this.$refs.privacy.close();
		        },
		        openPrivacyContract() {
		          uni.openPrivacyContract({
		            success: res => {
		              console.log('openPrivacyContract success')
		            },
		            fail: res => {
		              console.error('openPrivacyContract fail', res)
		            }
		          })
		        }
		    }
	}
</script>

<style lang="scss" scoped>
	.privacy-box {
		width: 100%;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		box-sizing: border-box;
		background-color: #fff;
		padding: 30rpx 30rpx 180rpx 30rpx;
		position: absolute;
		bottom: -100rpx;
		.privacy-title {
			color: #2e2e2e;
			font-size: 28rpx;
			line-height: 56rpx;
			margin-bottom: 24rpx;
		}
		.privacy-body {
			width: 100%;
			.privacy-tip {
				color: #979696;
				font-size: 24rpx;
				line-height: 44rpx;
				margin-bottom: 24rpx;
				&.active {
					color: #07c160;
				}
			}
		}
		.privacy-foot {
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 0 60rpx;
			box-sizing: border-box;
			.privacy-btn {
				width: 250rpx;
				height: 72rpx;
				line-height: 72rpx;
				border-radius: 36rpx;
				font-size: 28rpx;
				position: relative;
				text-align: center;
				button {
					width: 100%;
					height: 100%;
					opacity: 0;
					position: absolute;
					top: 0;
					left: 0;
				}
				&.active {
					color: #30240A;
					background: linear-gradient(97deg, #FADF5D 19%, #F7D35D 80%);
				}
				&.grey {
					background: #989898;
					color: #fff;
				}
			}
		}
	}
</style>